<script setup lang="ts">
import {ref} from "vue";
import {useStore} from "../../store";
import router from "../../router";
import StudentForm from "../../components/StudentForm.vue";
import {Student} from "../../types";
import {getStudentById} from "../../apis/StudentApi.ts";
import {ElMessage} from "element-plus";

const activeIndex = ref('1')
const store = useStore()
const showForm = ref(false)
const studentForm = ref<Student>()

const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const outLogin = async () => {
  store.studentInfo = {}
  store.studentIsLogin = false
  await router.push('/stu-login')
}


const openForm = () => {
  showForm.value = true
  studentForm.value = JSON.parse(JSON.stringify(store.studentInfo))
}
const getCurrentUser = async () => {
  let res = await getStudentById(store.studentInfo.id);
  if (res.flag) {
    store.studentInfo = res.data
    store.studentIsLogin = true
  } else {
    ElMessage.error(res.msg)
  }
}

</script>

<template>
  <el-menu
      background-color="#efefef"
      :default-active="activeIndex"
      class="el-menu-demo"
      router
      mode="horizontal"
      :ellipsis="false"
      @select="handleSelect"
  >
    <el-menu-item >
      <img
          style="width: 100px;overflow: hidden;border-radius: 5px;"
          src="../../assets/logo.jpg"
          alt="Element logo"
      />
    </el-menu-item>
    <div class="flex-grow" />
    <el-menu-item index="/student/index">首页</el-menu-item>
    <el-menu-item index="/student/my-course">我的课表</el-menu-item>
    <el-sub-menu>
      <template #title>你好,{{ store.studentInfo.name }}</template>
      <el-menu-item @click="openForm">修改个人信息</el-menu-item>
      <el-menu-item @click="outLogin">退出登录</el-menu-item>
    </el-sub-menu>
  </el-menu>

  <el-dialog v-model="showForm" v-if="showForm" title="修改个人信息" width="500">
    <StudentForm :is-stu-update="true" :data="studentForm" @handler="showForm = false;getCurrentUser()"/>
  </el-dialog>
</template>

<style scoped>
.flex-grow {
  flex-grow: 1;
}
</style>